<template>
  <div class="app-container">
    <div class="wrapper function">
      <el-col :span="9" class="warp-main">
        <el-col :span="24">
          <div class="el-bar">
            <p>
              <i class="iconfont icon-users"></i>查询条件</p>
            <el-form :inline="true" :model="keyname" class="demo-form-inline">
              <el-form-item label="查关键字">
                <el-input v-model="keyname.keyword" placeholder="请输入关键字"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="iconfont icon-sousuo2"  type="primary" @click="infraQuery">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="el-bar" style="margin-top:10px;">
            <p>
              <i class="iconfont icon-users"></i>查询列表
              <span>
                <span>{{infraCount}}</span>条</span>
            </p>
            <el-table v-loading="loadingDataTable" :data="infraData" ref="infraTable"  @row-click="infraChange" highlight-current-row style="width: 100%;margin-top:10px;">
              <el-table-column prop="name_Cn" label="组名">
              </el-table-column>
              <el-table-column prop="described" label="描述">
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页start -->
          <!-- <div v-show="usrListLoading" class="pagination-container" type="text-align:center">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-size="listQuery.pageSize"
        layout="prev, pager, next"
        :total="infraCount">
      </el-pagination>
    </div> -->
          <!-- 分页end   -->
        </el-col>
      </el-col>
      <el-col :span="15" class="warp-main function-form" style="padding-left:30px;">
        <div class="el-bar">
          <p>
            <i class="iconfont icon-users"></i>物理分组明细</p>
          <el-form :label-position="labelPosition" :rules="rules" ref="phycialDetial" label-width="120px" :model="phycialDetial" class="form-top">
            <el-form-item label="物理组名(中文)" prop="name_Cn">
              <el-input :disabled="disableInputname_Cn" v-model="phycialDetial.name_Cn" placeholder="请输入中文名"></el-input>
            </el-form-item>
            <el-form-item label="物理组名(英文)" prop="name_En">
              <el-input :disabled="disableInputname_Cn" v-model="phycialDetial.name_En" placeholder="请输入英文简称"></el-input>
            </el-form-item>
            <el-form-item label="物理分组类型">
              <el-radio-group v-model="phycialDetial.radio">
                <el-radio :disabled="disableRadio0" :label="0">共享物理组</el-radio>
                <el-radio :disabled="disableRadio1" :label="1">平台专用物理组</el-radio>
                <el-radio :disabled="disableRadio2" :label="2">应用系统物理组</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea" :rows="2" placeholder="请输入对该组的描述" :disabled="disbaleInputdescribed" v-model="phycialDetial.described">
              </el-input>
            </el-form-item>
            <div class="form-btn">
              <el-form-item>
                <el-button type="primary" class="iconfont icon-xinzeng" :disabled="disableInputADD" @click="infraAdd">新增</el-button>
                <el-button type="success" class="iconfont icon-baocun" :disabled="disableInputSave" @click="infraSave">保存</el-button>
                <el-button type="danger" icon="el-icon-delete" :disabled="disableInputDel" @click="infraDel">删除</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-col>
    </div>
  </div>
</template>
<script>
import { httpClient } from "@/utils/httpClient";
import { projectConfig } from "@/utils/projectConfig";
export default {
  data() {
    //名称唯一性校验
    var validatename_Cn = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入物理分组的名称"));
      } else {
        // let parm = { type: 'cn', value: value };
        let url = this.httpClient.urlParmHandle(
          this.projectConfig.URL_API_INSTRA_VALIDATE_NAME_MAP,
          ["cn", value]
        );
        // console.log(url);
        this.httpClient.httpClientget(url).then(response => {
          // 返回处理
          // const code = response.meta.code;
          // if (code == this.projectConfig.CODE_OK) {
          let data = response.data;
          if (data) {
            callback(new Error("物理分组重名，请换别的名称试试"));
          } else {
            callback();
          }
          // } else {
          //   callback();
          // }
        });
      }
    };
    var validatename_En = (rule, value, callback) => {
      // let reg = /^[a-zA-Z]+$/;//英文字母验证
      let reg = /(^[a-z]){1}([a-z]|[0-9]|[-]){2,61}([a-z]|[0-9]){1}$/;
      if (value === "") {
        callback(new Error("请输入物理分组英文名称"));
      } else if (!reg.test(value)) {
        callback(new Error("英文字母类型格式不正确!"));
      } else {
        //名称唯一性校验
        // let parm = { type: 'en', value: value };
        let url = this.httpClient.urlParmHandle(
          this.projectConfig.URL_API_INSTRA_VALIDATE_NAME_MAP,
          ["en", value]
        );
        // console.log(url);
        this.httpClient.httpClientget(url).then(response => {
          // 返回处理
          // const code = response.meta.code;
          // if (code == this.projectConfig.CODE_OK) {
          let data = response.data;
          if (data) {
            callback(new Error("物理分组英文名重名,请换别的名称重试!"));
          } else {
            callback();
          }
          // } else {
          //   callback();
          // }
        });
      }
    };
    return {
      infraData: [], //物理分组列表
      infraCount: 0, //物理分组条数
      selectinfraID: "", //选中的分组ID
      selectInfraDesc: "", //选中的物理分组描述
      selectInfraPythcialType: "", //选中的物理分组的原始分组类型
      // 物理明细
      phycialDetial: {
        name_Cn: "",
        name_En: "",
        radio: "",
        described: ""
      },
      // 是否禁止输入，默认是禁止

      disableInputname_Cn: true,
      disableInputname_En: true,
      disbaleInputdescribed: true,
      disableRadio0: true,
      disableRadio1: true,
      disableRadio2: true,
      disableInputADD: false,
      disableInputSave: false,
      disableInputDel: false,

      // 是否显示分页插件
      usrListLoading: false,
      listQuery: {
        page: 1,
        pageSize: 5,
        queryKey: ""
      },

      //查询关键
      keyname: {
        keyword: ""
      },
      textarea: "",
      labelPosition: "right",
      rules: {
        name_Cn: [{ validator: validatename_Cn, trigger: "blur" }],
        name_En: [{ validator: validatename_En, trigger: "blur" }],
        desc: []
      },
      // 查询遮罩
      loadingDataTable: false,

    };
  },
  created: function() {
    // 初始化刚加载的页面
    this.infraInit(), this.infraQuery();
  },
  methods: {
    //初始化
    infraInit() {
      this.disableInputDel = true;
    },
    // 物理分组查询
    infraQuery() {
      //发起请求
      let parm = { queryKey: this.keyname.keyword };
      // this.listQuery.queryKey=this.keyname.keyword;
      // 开启遮罩
      this.loadingDataTable = true;
      this.httpClient
        .httpClientget(this.projectConfig.URL_API_INSTRA_QUERY, parm)
        .then(response => {
            // 遮罩结束
            this.loadingDataTable = false;
          // 返回处理
          // const code = response.meta.code;
          // if (code == projectConfig.CODE_OK) {
          this.infraData = [];
          // this.infraData = response.data.items;
          this.infraData = response.data;
          this.infraCount = response.data.length;
          this.$refs.infraTable.setCurrentRow();
          // 清理物理分组信息
          this.$refs.phycialDetial.resetFields();
          // 查询完后清除radio/described选中状态并禁用
          this.phycialDetial.radio = "";
          this.phycialDetial.described = "";
          this.disbaleInputdescribed = true;
          this.disableRadio0 = true;
          this.disableRadio1 = true;
          this.disableRadio2 = true;
          this.disableInputDel = true;
          // if (this.infraCount > this.listQuery.pageSize) {
          //   this.usrListLoading = true;
          // }
          // else {
          //   this.usrListLoading = false;
          // }
          // } else {
          //   console.log("发生异常，异常代码为 " + code)
          // }
        }).catch(error => {
            // 遮罩结束
            this.loadingDataTable = false;
        });
    },

    // 分页搜索,当前页面改变触发事件
    handleCurrentChange(val) {
      // 获取当前页码
      this.listQuery.page = val;
      this.infraQuery();
    },

    // 基础设施物理分组单击事件
    infraChange: function(row, event, column) {
      // this.$refs.infraTable.setCurrentRow();
      // this.$refs.phycialDetial.resetFields();
      this.selectinfraID = row.id;
      this.selectInfraDesc = row.described;
      this.selectInfraPythcialType = row.radio;
      this.phycialDetial.id = row.id;
      this.phycialDetial.name_Cn = row.name_Cn;
      this.phycialDetial.name_En = row.name_En;
      this.phycialDetial.radio = row.radio;
      this.phycialDetial.described = row.described;
      // //根据id查询物理分组明细
      // 取消禁止按钮
      this.disableInputDel = false;
      this.disbaleInputdescribed = false;
      this.disableInputname_Cn = true;
      this.disableInputname_En = true;
      this.disableRadio0 = false;
      this.disableRadio1 = false;
      this.disableRadio2 = false;
      // let parm = "/" + this.selectinfraID;
      // this.httpClient.httpClientPost(this.projectConfig.URL_API_INSTRA_QUERY_BYID+parm).then((response) => {
      //     // console.log(JSON.stringify(response))
      //     // 返回处理
      //     let _code = response.meta.code;
      //     if (_code == this.projectConfig.CODE_OK) {
      //       this.phycialDetial=[];
      //       this.phycialDetial = response.data.result;
      //         console.log(this.phycialDetial);
      //         // this.phycialDetial.name_Cn = d[0].name_Cn;
      //         // this.phycialDetial.name_En = d[0].name_En;
      //         // this.phycialDetial.radio = d[0].radio;
      //         // this.phycialDetial.described = d[0].described;
      //     } else {
      //         alert('异常 异常代号为:' + code);
      //     }
      // });
    },
    // 新增*
    infraAdd() {
      // 取消列表选中
      this.$refs.infraTable.setCurrentRow();
      // 清理物理分组信息
      this.$refs.phycialDetial.resetFields();
      this.phycialDetial.described = "";
      // 取消禁用输入
      this.disableInputname_Cn = false;
      this.disableInputname_En = false;
      this.disbaleInputdescribed = false;
      this.disableRadio0 = false;
      this.disableRadio1 = false;
      this.disableRadio2 = false;
      this.disableInputDel = true;
      this.selectinfraID = "";
      this.phycialDetial.radio = "";
    },

    //物理分组保存

    //(1) 如果物理分组选中的id不为空  则为更新操作
    //  比对表单变化 如果没有任何变化则提示没有变化的更新,否则有更新就提交更新请求
    //(2) 如果物理分组选中的id为空 则为新增操作
    infraSave() {
      if (this.selectinfraID == "") {
        this.$refs["phycialDetial"].validate(valid => {
          if (valid) {
            let parm = {
              id: "",
              currentUserId: "b4394d18edcf4972b404ac7d6d38c823", //暂时写死
              name_Cn: this.phycialDetial.name_Cn,
              name_En: this.phycialDetial.name_En,
              described: this.phycialDetial.described,
              radio: this.phycialDetial.radio
            };
            // 操作审计
            this.userBaseInfo.setOperObjectName(this.phycialDetial.name_Cn + ':' + this.phycialDetial.name_En);
            this.httpClient
              .httpClientPost(this.projectConfig.URL_API_INSTRA_SAVE, parm)
              .then(response => {
                // let _code = response.meta.code;
                // if (_code == this.projectConfig.CODE_OK) {
                //   this.$message({
                //     message: "保存成功",
                //     type: "success"
                //   })
                //   this.$refs.phycialDetial.resetFields();
                //   this.disableInputname_Cn = true;
                //   this.disableInputname_En = true;
                //   this.disbaleInputdescribed = true;
                //   this.disableRadio0 = true;
                //   this.disableRadio1 = true;
                //   this.disableRadio2 = true;
                //   this.phycialDetial.described = '';
                //   this.phycialDetial.radio = '';
                //   this.selectinfraID = '';
                //   this.selectInfraDesc = '';
                //   this.infraQuery();
                // }
                // else {
                //   this.$message({
                //     message: "保存失败,请重试",
                //     type: "error"
                //   })
                // }
                this.$refs.phycialDetial.resetFields();
                this.disableInputname_Cn = true;
                this.disableInputname_En = true;
                this.disbaleInputdescribed = true;
                this.disableRadio0 = true;
                this.disableRadio1 = true;
                this.disableRadio2 = true;
                this.phycialDetial.described = "";
                this.phycialDetial.radio = "";
                this.selectinfraID = "";
                this.selectInfraDesc = "";
                this.infraQuery();
              });
          }
        });
      } else {
        let haveChange = false;
        let _type = this.selectInfraPythcialType;

        if (this.phycialDetial.radio != _type) {
          haveChange = true;
        } else {
          if (this.selectInfraDesc != this.phycialDetial.described) {
            haveChange = true;
          }
        }
        if (haveChange) {
          let parm = {
            id: this.selectinfraID,
            described: this.phycialDetial.described,
            radio: this.phycialDetial.radio
          };
          // 操作审计
            this.userBaseInfo.setOperObjectName(this.phycialDetial.name_Cn + ':' + this.phycialDetial.name_En);
          this.httpClient
            .httpClientPatch(this.projectConfig.URL_API_INSTRA_UPDATE, parm)
            .then(response => {
              //   let _code = response.meta.code;
              //   if (_code == this.projectConfig.CODE_OK) {
              //     this.$message({
              //       message: "保存成功",
              //       type: "success"
              //     })
              //     this.$refs.phycialDetial.resetFields();
              //     this.disableInputname_Cn = true;
              //     this.disableInputname_En = true;
              //     this.disbaleInputdescribed = true;
              //     this.disableRadio0 = true;
              //     this.disableRadio1 = true;
              //     this.disableRadio2 = true;
              //     this.phycialDetial.described = '';
              //     this.phycialDetial.radio = '';
              //     this.selectinfraID = '';
              //     this.selectInfraDesc = '';
              //     this.infraQuery();
              //   }
              //   else {
              //     this.$message({
              //       message: "保存失败,请重试",
              //       type: "error"
              //     })
              //   }
              this.$refs.phycialDetial.resetFields();
              this.disableInputname_Cn = true;
              this.disableInputname_En = true;
              this.disbaleInputdescribed = true;
              this.disableRadio0 = true;
              this.disableRadio1 = true;
              this.disableRadio2 = true;
              this.phycialDetial.described = "";
              this.phycialDetial.radio = "";
              this.selectinfraID = "";
              this.selectInfraDesc = "";
              this.infraQuery();
            });
        } else {
          this.$message({
            message: "警告,没有任何变化,不需要更新!",
            type: "warning"
          });
        }
      }
    },
    // 删除
    infraDel() {
      this.$confirm("确定删除该组", "提示", {
        confirmButtonText: "确定",
        cancleButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // let parm={
          //   id:this.selectinfraID
          // }
          let url = this.httpClient.urlParmHandle(
            this.projectConfig.URL_API_INSTRA_DELETE,
            [this.selectinfraID]
          );
          // 操作审计
            this.userBaseInfo.setOperObjectName(this.phycialDetial.name_Cn + ':' + this.phycialDetial.name_En);
          this.httpClient.httpClientDelete(url).then(res => {
            // let _code = res.meta.code;
            // // console.log(_code);
            // if (_code == this.projectConfig.CODE_OK) {
            //   this.$refs.phycialDetial.resetFields();
            //   this.disableInputname_Cn = true;
            //   this.disableInputname_En = true;
            //   this.disbaleInputdescribed = true;
            //   this.disableRadio0 = true;
            //   this.disableRadio1 = true;
            //   this.disableRadio2 = true;
            //   this.phycialDetial.described = '';
            //   this.phycialDetial.radio = '';
            //   this.selectinfraID = '';
            //   this.selectInfraDesc = '';
            //   this.infraQuery();
            //   this.$message({
            //     message: '删除成功',
            //     type: 'success'
            //   });
            // }
            //  else {
            //   this.$message({
            //     message: "删除失败，不能删除该物理组，该物理组已经在使用中",
            //     type: "error"
            //   })
            // }
            this.$refs.phycialDetial.resetFields();
            this.disableInputname_Cn = true;
            this.disableInputname_En = true;
            this.disbaleInputdescribed = true;
            this.disableRadio0 = true;
            this.disableRadio1 = true;
            this.disableRadio2 = true;
            this.phycialDetial.described = "";
            this.phycialDetial.radio = "";
            this.selectinfraID = "";
            this.selectInfraDesc = "";
            this.infraQuery();
          });
        })
        .catch(() => {
          this.$message({
            message: "cancle",
            type: "info"
          });
        });
    }
  }
};
</script>
<style>
.function .el-form {
  margin-top: 12px;
}

.function-form .form-top {
  margin-top: 20px;
}

.function .el-select {
  border: 1px solid #ccc;
  width: 176px;
  border-radius: 4px;
}

.function .form-btn {
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
  text-align: right;
}
</style>